<template>
  <div >
    <el-form ref="form" :rules="rules" :model="form" label-width="110px" class="layout-all form-width-50">
      <el-form-item prop="title" label="店铺名称:">
        <el-input v-model="form.title" placeholder="请输入店铺名" disabled/>
        <el-rate disabled v-model="form.avg_appraise" style="margin-top: 10px;" show-text :colors="colors" />
        <div>可提现金额<el-tag style="margin-left:10px">{{form.money}}</el-tag></div>
        <div>未结算金额<el-tag style="margin-left:10px" type="danger">{{form.wait_money}}</el-tag></div>
        
      </el-form-item>

      <el-form-item prop="tel" label="店铺电话:">
        <el-input v-model="form.tel" placeholder="请输入店铺电话" />
      </el-form-item>
      
      <el-form-item prop="thumb" label="图标:">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100" :append="true"/>
        <div style="font-size:12px;">建议尺寸：72X72</div>
      </el-form-item>
      <el-form-item prop="logo" label="主页logo:">
        <upload-pic :thumb="form.logo" @update:thumb="form.logo=$event" width="100" :append="true"/>
      
        <div style="font-size:12px;">建议尺寸：72X72</div>
      </el-form-item>
      <el-form-item prop="background" label="主页背景:">
        <upload-pic :thumb="form.background" @update:thumb="form.background=$event" width="350" heigth="175" :append="true"/>
       <div style="font-size:12px;">建议尺寸：700X350</div>
      </el-form-item>
      <el-form-item prop="description" label="介绍:">
        <el-input v-model="form.description" placeholder="请输入店铺介绍" />
      </el-form-item>
      
      <el-form-item prop="lng" label="经度:">
        <el-input v-model="form.lng" placeholder="请输入经度" />
      </el-form-item>
      <el-form-item prop="lat" label="纬度:">
        <el-input v-model="form.lat" placeholder="请输入纬度" />
      </el-form-item>
      <el-form-item prop="is_open" label="店铺开关:">
        <el-switch v-model="form.is_open" />
      </el-form-item>



          <!-- 以下只读 -->
      <el-collapse  style="margin: 30px;" class="form-width-w">
      <el-collapse-item title="更多资料" name="1">
          <div>
            <el-form-item prop="account" label="登录账户:">
        <el-input v-model="form.account" placeholder="请输入登录账户" disabled/>
      </el-form-item>
      <el-form-item prop="sub_title" label="店铺简称:">
        <el-input v-model="form.sub_title" placeholder="请输入店铺简称" disabled/>
      </el-form-item>
      <el-form-item prop="address" label="店铺地址:">
        <el-input v-model="form.address" placeholder="请输入店铺地址" disabled/>
      </el-form-item>
      <el-form-item prop="is_system" label="是否官方店铺:">
        <el-switch v-model="form.is_system" disabled/>
      </el-form-item>
      <el-form-item prop="status" label="上传商品上限:">
        <el-input :value="form.goods_count==0?'不限':form.goods_count" placeholder="" disabled/>
      </el-form-item>
      <el-form-item prop="status" label="是否自动审核上传的商品:">
        <el-switch v-model="form.auto_check" disabled/>
      </el-form-item>
      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" disabled/>
      </el-form-item>
      <el-form-item label="所属城市">
        <el-cascader v-model="form.city_id"  :props="props" style="width: 240px;" @change="is_change=true" disabled></el-cascader>
      </el-form-item>
    
      <el-form-item prop="shop_cate_id" label="经营类目:">
       <el-select v-model="form.shop_cate_ids" multiple placeholder="不限制" disabled>
          <el-option
            v-for="item in cate"
            :key="item.id"
            :label="item.title"
            :value-key="item.id"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
          </div>
              
      </el-collapse-item>
  </el-collapse>

      <el-form-item style="margin: 20px 0">
        <el-button type="success" icon="el-icon-check"  @click="onSubmit('form')" >保存</el-button>
      </el-form-item>


      
    </el-form>
  </div>
</template>

<script>

import {get} from '@/utils/request'
export default {
  name:"shop_form",
  data() {
    return {
      is_change: undefined,
      props: {
          lazy: true,
          value:'id',
          label:'name',
          lazyLoad (node, resolve) {
            const { level ,value} = node;
            let data={parent_id:value}
            get("/pub/Common/get_region", data, "POST").then((e) => {
              let nodes=e.list
              if(level==2){
                for(let i in nodes){
                  nodes[i].leaf=true
                }
              }
              resolve(nodes);
            })
          }
        },
      // background_vis: false,
      // background_img: '',
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      id: 0,
      apply: null,
      options_cate: [],
      city_ids: [],
      options_ctity: [],
      cate: [],
      shop_cate_id: [],
      form: {
        title: "",
        account: "",
        sub_title: "",
        cate_id: 1,
        description: "",
        thumb: "",
        address: "",
        tel: "",
        city_id: 0,
        goods_count: 20,
        logo: "",
        background: "",
        lng: "",
        lat: "",

        avg_appraise: 0,
      },
      rules: {
        tel: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        lng: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
        lat: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {

    onSubmit(formName) {
      if(!this.is_change){
        this.$msg_ok('error','没有作出更改')
        return
      }
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.is_open === true ? (form.is_open = 1) : (form.is_open = 0);
          this.get("/shop/Shop/save", form, "POST").then((e) => {
            this.$msg_ok('success','保存成功')
          });
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },

    init_into() {
      const that=this
      this.get("/shop/Shop/form", {}, "POST").then(
        (e) => {

            const tpl = e.info;
            this.form=tpl
            this.form.is_system=Number(tpl.is_system) === 1
            this.form.is_open=Number(tpl.is_open) == 1
            this.form.status=Number(tpl.status) == 1
            this.form.auto_check=Number(tpl.auto_check) == 1
            this.cate=e.cate
            this.cate.unshift({id:0,title:'全部'})
            if(this.form.shop_cate_ids.length==0){
              this.form.shop_cate_ids[0]=0
            }else{
              for(var i in tpl.shop_cate_ids){
                this.form.shop_cate_ids[i]=Number(tpl.shop_cate_ids[i])
              }
            }

            console.log(this.form.shop_cate_ids)
          setTimeout(()=>{this.is_change=false},100)
        }
      );
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
